<template>
  <div :class="'layer-wrap '+skin" v-if="isShow">
    <div class="shade" @click="hide" v-if="skin!='msg'"></div>
    <div class="layer" flex="main:center cross:center">
      <div class="main" :anim="anim" v-if="skin=='msg'">
        <div class="content">
          {{content}}
        </div>
      </div>
      <div class="main" v-else-if="skin=='loading'">
        <img src="../img/loading.gif">
        <p>加载中...</p>
      </div>
      <div class="main" :anim="anim" v-else>
        <h3>{{title}}</h3>
        <div class="content" v-html="content" />
        <div class="btn" v-if="typeof btn=='string'">
          <span @click="onYes">{{btn}}</span>
        </div>
        <div class="btn confirm" flex="main:center" v-else>
          <span @click="onYes">{{btn[0]}}</span>
          <span @click="hide">{{btn[1]}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'layer',
  data () {
    return{
      timer:null,
    }
  },
  props:{
    content:String,
    isShow:{
      type:Boolean,
      default:false
    },
    title:{
      type:String,
      default:'提示信息'
    },
    skin:{
      type:String,
      default:''
    },
    btn:{
      type:[String,Array],
      default:'确认'
    },
    anim:{
      default:'scale'
    },
    yes:{
      type:Function,
      default:()=>{
        
      }
    }
  },
  methods:{
    onYes(){
      this.yes()
      this.hide()
    },
    hide(){
      this.isShow=false
    }
  },
  mounted(){
    
  }
}
</script>

<style lang="less" scoped>
@opacity: rgba(0,0,0,0.7);
.layer-wrap{
  .shade{
    position: fixed;
    top: 0;
    left: 0;
    background: @opacity;
    width: 100%;
    height: 100%;
    z-index: 1000;
    pointer-events: auto;
  }
  .layer{
    .shade;
    background: none;
    pointer-events: none;
    .main{
      width: 90%;
      background: #fff;
      border-radius: 5px;
      text-align: center;
      overflow: hidden;
      animation-fill-mode: both;
      animation-duration: .2s;
      pointer-events: auto;
      h3{
        background-color: #8DCE16;
        line-height: 60px;
        font-size: 16px;
        color: #fff;
        font-weight: 400;
      }
      .content{
        padding: 50px 30px;
        font-size: 14px;
      }
      .btn{
        border-top: 1px solid #D0D0D0;
        background-color: #F2F2F2;
        line-height: 50px;
        color: #0099d9;
        font-size: 15px;
        span{
          display: block;
        }
        &.confirm{
          span{
            width: 50%;
            &:first-child{
              border-right: 1px solid #D0D0D0;
            }
          }
        }
      }
    }
  }
  &.msg{
    .main{
      width: auto;
      background: @opacity;
      max-width: 90%;
      margin-top: 60%;
      .content{
        padding: 10px 20px;
        color: #fff;
      }
    }
  }
  &.loading{
    .shade{
      background: rgba(0,0,0,0.2);
    }
    .layer{
      pointer-events: auto;
    }
    .main{
      width: 4rem;
      height: 3rem;
      background: rgba(0,0,0,0.7);
      border-radius: 10px;
      color: #fff;
      font-size: 15px;
      z-index: 1001;
      img{
        width:3rem;
      }
    }
  }
}
</style>